<!--  -->
<template>
  <div>
    <strong style="font-size:25px">金川集团监控平台</strong>

    <div class="header-right">
      <el-avatar :src="userInfo.portrait"></el-avatar>

      <el-dropdown style="margin-left:10px">
        <span class="el-dropdown-link">
          {{ userInfo.username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/userCenter">
            <el-dropdown-item>
              <!-- <router-link to="/userCenter"> -->
              个人中心
              <!-- </router-link> -->
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件、工具js、)
//例如：import 组件名 from '组件路径'
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "Home",
  data() {
    return {
      user_role: "超级管理员",
      userInfo: {
        id: "",
        username: "超级管理员",
        portrait:
          "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      }
    };
  },

  components: {},

  computed: {},

  // mounted: {},

  methods: {
    //获取用户信息
    getUserInfo() {
      this.$http.get("/sys/user/getUserInfo").then(res => {
        this.userInfo = res.data.data;
      });
    },
    //退出登录
    logout() {
      this.$http.get("/logout").then(res => {
        //清除缓存的信息
        localStorage.clear();
        sessionStorage.clear();
        this.$store.commit("resetState");

        this.$router.push("/login");
      });
    }
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getUserInfo();
  }
};
</script>
<style scoped>
.el-header {
  background-color: rgb(103, 179, 164);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header div {
  height: 100%;
}
.header-right {
  float: right;
  width: 230px;
  height: 100%;
  display: flex;
  align-items: center;
  /* flex-direction: column; */
  justify-content: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #333333;
}
</style>
